// 该文件专门用于创建整个应用的路由器
// 引入VueRouter
import VueRouter from "vue-router";
// 引入组件
import About from '../views/About'
import Home from '../views/Home'
import News from '../views/News'
import Message from '../views/Message'
import Detail from '../views/Detatil'


// 创建并暴露router实例对象，在这里配置一组一组的路由规则
export default new VueRouter({
    // 配置路由
    routes:[
        // 配置路由规则：path（路径）；component（路由对应的组件）。   每个路由的配置写在一个对象{}，对象之间用','间隔
        // 一级路由
        {
            name:'about',
            path:'/about',
            component:About
        },
        // 一级路由
        {
            name:'home',
            path:'/home',
            component:Home,
            // 二级路由（二级路由的path不用加'/'，只需要在跳转的router-link标签的to属性加上一级路由的名称，例如/home/message....）
            children:[
                {
                    path:'message',
                    component:Message,
                    // 三级路由
                    children:[
                        // name属性：为路由命名，每个路由都可以配置name属性，在需要引用路由的路径时，可以直接写name属性的命名
                        {
                            name:'detail',
                            path:'detail/:id/:title/:info', // 使用占位符声明接收params参数
                            component:Detail,
                            // props的第一种写法，值为对象，该对象中所有的key-value都会以props的形式传给Detail组件。
                            // props:{id:1,msg:'hello'} // 少用，了解即可

                            // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的'所有params参数'以props的形式传给Detail组件
                            // props:true

                            // props的第三种写法，值为函数，函数形参里拿到的参数可以是route里的所有数据，这一写法通用params和query两种传参
                            props(route){
                                return {
                                    id:route.params.id,
                                    title:route.params.title,
                                    info:route.params.info,
                                    a:1,
                                    b:'hello'
                                }
                            }
                        }
                    ]
                },
                {
                    path:'news',
                    component:News,
                }
            ]
        },
    ]
})